import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// 导入路由
import router from "./router";

Vue.config.productionTip = false;
Vue.use(ElementUI);

Vue.directive("imgErr", {
  inserted(el, binding) {
    // console.log(el)
    // console.log(binding)
    el.addEventListener("error", function () {
      console.log("图片报错了", binding);
      // el.src = defaultUrl
      el.src = binding.value;
      /*   这里是为了我们封装的指令更加通用（不仅仅用在头像）
      标签的默认图片就不适合在这里写死 因此默认图片
      可以在使用指令时传入
       */
    });
    /*  如果后端返回的图地址不存在（图片地址不存在的时候渲染图片的时候是不会报错的）
      因此需要在监听错误事件的外面来设置图片默认值 */
    el.src = el.src || binding.value;
  },
  // componentUpdated当组件或者其子组件数据更新的时候就会被触发
  componentUpdated(el, binding) {
    // console.log(el)
    // console.log(binding)
    el.addEventListener("error", function () {
      console.log("图片报错了", binding);
      // el.src = defaultUrl
      el.src = binding.value;
    });
    el.src = el.src || binding.value;
  },
});

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  router, // 把路由注入到vue实例
  store,
  render: (h) => h(App),
}).$mount("#app");
